<template>
  <div class="healthInfo pd-20">
    <el-input v-model="param.name"
              placeholder="请输入服务名称"
              class="w-200"
              clearable
              @clear="handleQuery"></el-input>
    <el-button @click="handleQuery"
               type="primary">查 询</el-button>
    <el-button @click="handle(2,0)"
               type="primary">新 增</el-button>
    <el-button type="info"
               plain
               @click="$router.push({ name: 'cooperationHospital' })">返 回</el-button>

    <el-table :data="tableData"
              border
              class="mt-20"
              style="width: 100%">
      <el-table-column align="center"
                       type="index"
                       min-width="20"></el-table-column>
      <el-table-column align="center"
                       prop="name"
                       label="服务名称"></el-table-column>
      <el-table-column align="center"
                       prop="hospitalName"
                       label="所属客户医院"></el-table-column>
      <el-table-column align="center"
                       prop="price"
                       label="服务价格(元)"></el-table-column>
      <!-- <el-table-column align="center" prop="num" label="每日号源数" ></el-table-column> -->
      <el-table-column align="center"
                       label="状态">
        <template slot-scope="scoped">
          <span style="color:#f00">{{scoped.row.status === 1 ?'上架':'下架'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="上架时间"
                       :formatter="formatterDate"></el-table-column>

      <el-table-column align="center"
                       label="操作"
                       width="240">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="handle(3,scope.row)">编 辑</el-button>
          <el-button type="info"
                     @click="handle(4,scope.row)">{{scope.row.status === -1 ?'上 架':'下 架'}}</el-button>
          <el-button type="danger"
                     @click="handle(5,scope.row)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <inspection-dialog v-if="showdialog"
                       :dialogData='dialogData'
                       @closedialog='showdialog=false;_getList()' />
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import inspectionDialog from './inspectionDialog'
  import { mapGetters } from 'vuex'

  export default {
    name: "inspectionManagement", // 快诊管理
    data () {
      return {
        param: {},
        tableData: [],
        pageTotal: 0,
        showdialog: false,
        dialogData: {
          show: true,
          info: {}
        },
        hospitalId: this.$route.query.hospitalId
      }
    },
    mounted () {
      this._getList();
    },
    methods: {
      handleQuery() {
        this.page.pageIndex=0
        this._getList()
      },

      handle (index, row) {
        switch (index) {
          case 1:
            this._getList()
            break
          case 2:
            this.showdialog = true
            this.dialogData = {
              show: true,
              info: null
            }
            break;
          case 3:
            this.post(this.api.cooperationHospital.consultationDetail, { id: row.id }).then(res => {
              this.showdialog = true
              this.dialogData = {
                show: true,
                row: row,
                info: res.data.object
              }
            })

            break
          case 4:
            let state
            row.status === 1 ? state = -1 : state = 1;
            this.$confirm(`您是否要${state === 1 ? '上架' : '下架'}该套餐？`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

              this.post(this.api.cooperationHospital.updateStatus, { status: state, id: row.id }).then(res => {
                if (res.data.code === '200') {
                  this.$message.success(`${state === 1 ? '上架' : '下架'}成功!`);
                  this._getList()
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            });
            break
          case 5:
            this.$confirm('此操作将永久删除, 是否继续？')
              .then(_ => {
                this.post(this.api.cooperationHospital.quickConsultationdel, { id: row.id }).then(res => {
                  if (res.data.code === '200') {
                    this.$message.success('删除成功!');
                    this._getList();
                  }
                })
              })
              .catch(_ => { });
            break
        }

      },
      _getList () {
        let param = {
          name: this.param.name,
          pageSize: this.page.pageSize,
          pageIndex: this.page.pageIndex,
          hospitalId: this.hospitalId
        }
        this.post(this.api.cooperationHospital.getQuickConsultationList, param).then(res => {
          if (res.data.code === '200') {
            this.tableData = res.data.object;
            this.pageTotal = res.data.totalNum;
          }
        })
      },
      formatterDate (row) {
        return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
      },
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page,
      'inspection-dialog': inspectionDialog
    }
  }
</script>

<style scoped lang="scss" >
  .avatar-uploader {
    width: 100px;
    height: 100px;
    border: 1px dashed #606266;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader:hover {
    border-color: #409eff;
  }

  .avatar-uploader .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px;
    height: 98px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
